<template>

  <lay-container :fluid="true" style="padding: 10px">
    <lay-row :space="10">
<!--      顶部-->
      <lay-col :md="24" :sm="24" :xs="24">
        <lay-card class="statistics">
            当前宿舍号:{{title.hostelName}}
        </lay-card>
      </lay-col>
<!--      左侧-->
      <lay-col :md="8" :sm="8" :xs="8">
        <lay-card class="statistics">
          <div class="card" v-for="(item,index) in studentList">
            <div class="card-details">
              <p class="text-title">{{item.studentName}}</p>
              <p class="text-body">{{item.collegeNameAndClassName}}</p>
            </div>
            <button class="card-button">查看详情</button>
          </div>


        </lay-card>
      </lay-col>



      <lay-col :md="16" :sm="16" :xs="16">
        <lay-card class="statistics">
          <div class="table-box">
            <lay-table
                :page="page"
                :height="'100%'"
                :columns="columns"
                :loading="loading"
                :default-toolbar="true"
                :data-source="dataSource"
                v-model:selected-keys="selectedKeys"
                @change="change"
                @sortChange="sortChange"
            >
              <template #unitType="{ row }">
                <lay-tooltip :visible="false" trigger="hover" :content="row.unitType">
                  <div class="oneRow">{{ row.unitType }}</div>
                </lay-tooltip>
              </template>

              <template #operatingType="{ row }">
                <div v-show="row.operatingType == '登录成功'">
                  <lay-tag color="#2dc570" variant="light">登录成功</lay-tag>
                </div>
                <div v-show="row.operatingType == '登录失败'">
                  <lay-tag color="#F5319D" variant="light">登录失败</lay-tag>
                </div>
              </template>
              <template #remark="{ row }">
                <lay-tooltip :visible="false" trigger="hover" :content="row.remark">
                  <div class="oneRow">{{ row.remark }}</div>
                </lay-tooltip>
              </template>
              <template v-slot:toolbar> </template>
              <template v-slot:operator="{ row }">
                <lay-popconfirm
                    content="确定要删除此条登录记录吗?"
                    @confirm="confirm(row)"
                    @cancel="cancel"
                >
                  <lay-button size="xs" border="red" border-style="dashed"
                  >删除</lay-button
                  >
                </lay-popconfirm>
              </template>
            </lay-table>
          </div>
        </lay-card>
      </lay-col>


    </lay-row>
  </lay-container>
</template>

<script setup lang="ts">
import { ref, reactive,onMounted } from 'vue'
import { layer } from '@layui/layui-vue'
import {getPage} from "@/api/system/role";
import {getStudentList} from "@/api/business/live";
import {useRoute, useRouter} from 'vue-router';


const route = useRoute();
const router = useRouter();


onMounted(()=>{
  const hostel = route.query.hostelId; // 访问传递的参数
  const hostelName = route.query.hostelName; // 访问传递的参数
  title.value.hostelId = hostel;
  title.value.hostelName = hostelName;
  //列表查询
  fetchDataStudent();

})

//查询列表
const fetchDataStudent = () =>{
  let searchQuery = {hostelId :title.value.hostelId}
  getStudentList(searchQuery).then(res=>{
      if (res.code == 0 && res.data.length >0 ){
        studentList.value = res.data;
      }
  })

}

const studentList = ref();

const title = ref({
  hostelId:'',
  hostelName:''
})



const searchQuery = ref({
  userAccount: '',
  userName: '',
  rangeTime: ['2001-01-01 01:01:00', '2001-02-1 01:01:00']
})

function toReset() {
  searchQuery.value = {
    userAccount: '',
    userName: '',
    rangeTime: ['2001-01-01 01:01:00', '2001-02-1 01:01:00']
  }
}

function toSearch() {
  page.current = 1
  change(page)
}

const loading = ref(false)
const selectedKeys = ref()
const page = reactive({ current: 1, limit: 10, total: 100 })
const columns = ref([
  { title: '账号', key: 'account', sort: 'desc' },
  { title: '用户名', key: 'name', sort: 'desc' },
  { title: 'IP地址', key: 'ipAddrees', sort: 'desc' },
  {
    title: '设备型号',
    width: '220px',
    key: 'unitType',
    sort: 'desc',
    customSlot: 'unitType'
  },
  { title: '操作系统', key: 'operatingSystem' },
  {
    title: '操作类型',
    width: '120px',
    key: 'operatingType',
    customSlot: 'operatingType'
  },
  { title: '浏览器', key: 'browser' },
  { title: '备注', width: '220px', key: 'remark', customSlot: 'remark' },
  { title: '登录时间', width: '220px', key: 'joinTime' }
])
const change = (page: any) => {
  loading.value = true
  setTimeout(() => {
    dataSource.value = loadDataSource(page.current, page.limit)
    loading.value = false
  }, 1000)
}
const sortChange = (key: any, sort: number) => {
  layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
}
const dataSource = ref([
  {
    id: '1',
    name: '管理员',
    account: 'admin',
    operatingSystem: 'Windows',
    unitType: 'Windows 10 or Windows Server 2016',
    browser: 'Chrome',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09 15:09:34',
    ipAddrees: '171.120.210.128',
    operatingType: '登录成功'
  },
  {
    id: '2',
    name: '用户1',
    account: 'admin',
    operatingSystem: 'Android',
    unitType: 'Android',
    browser: 'DingTalk',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09 15:09:34',
    operatingType: '登录成功',
    ipAddrees: '124.92.199.219'
  },
  {
    id: '3',
    account: 'admin',
    name: '管理员',
    operatingSystem: 'Windows',
    unitType: 'Windows 10 or Windows Server 2016',
    browser: 'Firefox',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09 15:09:34',
    operatingType: '登录成功',
    ipAddrees: '39.155.212.237'
  },
  {
    id: '4',
    account: 'admin',
    name: '用户2',
    operatingSystem: 'Windows',
    unitType: 'Windows 10 or Windows Server 2016',
    browser: 'Chrome',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09 15:09:34',
    operatingType: '登录失败',
    ipAddrees: '113.65.14.222'
  },
  {
    id: '5',
    account: 'admin',
    name: '管理员',
    operatingSystem: 'Android',
    unitType: 'Android',
    browser: 'Chrome',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09 15:09:34',
    operatingType: '登录成功',
    ipAddrees: '113.128.81.221'
  },
  {
    id: '6',
    account: 'admin',
    name: '管理员',
    operatingSystem: 'Windows',
    unitType: 'Windows 10 or Windows Server 2016',
    browser: 'MSEdge',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09 15:09:34',
    operatingType: '登录成功',
    ipAddrees: '182.48.101.103'
  },
  {
    id: '7',
    account: 'admin',
    name: '用户1',
    operatingSystem: 'Windows',
    unitType: 'Windows 10 or Windows Server 2016',
    browser: 'MSEdge',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09 15:09:34',
    operatingType: '登录成功',
    ipAddrees: '171.213.58.73'
  },
  {
    id: '8',
    account: 'admin',
    name: '用户1',
    operatingSystem: 'Windows',
    unitType: 'Windows 10 or Windows Server 2016',
    browser: 'MicroMessenger',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09 15:09:34',
    operatingType: '登录成功',
    ipAddrees: '119.143.100.106'
  },
  {
    id: '9',
    account: 'admin',
    name: '管理员',
    operatingSystem: 'Windows',
    unitType: 'Windows 10 or Windows Server 2016',
    browser: 'Chrome',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09 15:09:34',
    operatingType: '登录失败',
    ipAddrees: '139.162.18.175'
  },
  {
    id: '10',
    account: 'admin',
    name: '管理员',
    operatingSystem: 'Windows',
    unitType: 'Windows 10 or Windows Server 2016',
    browser: 'Chrome',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09 15:09:34',
    operatingType: '登录成功',
    ipAddrees: '14.215.245.130'
  }
])
const changeStatus = (isChecked: boolean, row: any) => {
  dataSource.value.forEach((item: any) => {
    if (item.id === row.id) {
      layer.msg('Success', { icon: 1 }, () => {
        item.ipAddrees = isChecked
      })
    }
  })
}
const remove = () => {
  layer.msg(selectedKeys.value, { area: '50%' })
}
const loadDataSource = (page: number, pageSize: number) => {
  var response = []
  var startIndex = (page - 1) * pageSize + 1
  var endIndex = page * pageSize
  for (var i = startIndex; i <= endIndex; i++) {
    response.push({
      id: `${i}`,
      browser: 'Chrome',
      operatingSystem: 'Windows',
      account: 'admin',
      operatingType: '登录成功',
      name: '管理员',
      remark: '花开堪折直须折,莫待无花空折枝.',
      joinTime: '2022-02-09 15:09:34',
      unitType: 'Windows 10 or Windows Server 2016',
      ipAddrees: '111.121.13.184'
    })
  }
  return response
}
function confirm(row: any) {
  layer.msg('您已成功删除')
}
function cancel() {
  layer.msg('您已取消操作')
}
</script>

<style scoped>

.statistics {
  font-size: 24px !important;
  /*display: flex;*/
  /*justify-content: center; !* 水平居中 *!*/
  /*align-items: center; !* 垂直居中 *!*/
  /*padding-left: 30px;*/
}

.statistics-body {
  padding: 14px 0;
}
.card {
  width: 250px;
  height: 80px;
  border-radius: 20px;
  background: #f5f5f5;
  position: relative;
  padding: 1.8rem;
  border: 2px solid #c3c6ce;
  transition: 0.5s ease-out;
  overflow: visible;
  margin-bottom: 20px;
}

.card-details {
  color: black;
  height: 100%;
  gap: .5em;
  display: grid;
  place-content: center;
}

.card-button {
  transform: translate(-50%, 125%);
  width: 60%;
  border-radius: 1rem;
  border: none;
  background-color: #008bf8;
  color: #fff;
  font-size: 1rem;
  padding: .5rem 1rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  transition: 0.3s ease-out;
}

.text-body {
  font-size: 18px;
  color: rgb(134, 134, 134);
}

/*Text*/
.text-title {
  font-size: 1.2em;
  font-weight: bold;
}

/*Hover*/
.card:hover {
  border-color: #008bf8;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.card:hover .card-button {
  transform: translate(-50%, 50%);
  opacity: 1;
}

.login-box {
  width: calc(100vw - 220px);
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.top-search {
  margin-top: 10px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
}
.table-box {
  margin-top: 10px;
  padding: 10px;
  height: 700px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
.oneRow {
  width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>